import React, { Component } from 'react'
/* 
    实现步骤
    1、在DOM元素上使用ref属性将DOM元素绑定到this实例上
    <input ref={(args)=>this.xxEle=args}>
    2、在实例的任何方法中直接获取文本框中的内容
    this.xxEle.value

    建议：如果你操作的是表单元素，建议直接使用这种方式
    如果操作的并非是表单元素，表单元素之外的DOM，建议可以使用createRef的方式来完成
*/
export default class Login extends Component {
  login=()=>{
    //获取表单元素的内容
    console.log('姓名:',this.nameEle.value);
    console.log('年龄:',this.ageEle.value);
    console.log('生日：',this.birthdayEle.value);
  }
  render() {
    return (
      <div>
        <div>
            <label htmlFor="">姓名:</label>
            <input type="text" ref={(input)=>this.nameEle=input}/>
        </div>
        <div>
            <label htmlFor="">年龄:</label>
            <input type="text" ref={(input)=>this.ageEle=input}/>
        </div>
        <div>
            <label htmlFor="">生日:</label>
            <input type="date" ref={(input)=>this.birthdayEle=input}/>
        </div>
        <div>
            <button onClick={this.login}>登录</button>
        </div>
      </div>
    )
  }
}
